<template>
	<view class="container">
		<view class="van_top">
			<van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
		</view>
		<view class="pic">
			<image src="https://yukukeji-oss.oss-cn-beijing.aliyuncs.com/source/XcxShopB1/ykkjLogin.png" mode="aspectFill" />
			<view class="radio-bg"></view>
		</view>
		<view class="form">
			<form @submit="onSubmit">
				<van-field :value="loginForm.username" :name="loginForm.username" size="large" title-width="50rpx" type="number" placeholder="请输入手机号"
					@change="e => loginForm.username = e.detail.split(/[\t\r\f\n\s]*/g).join('')">
					<template slot="label">
						<view class="icon_pic">
							<image src="/static/login/username.png" mode="aspectFill"></image>
						</view>
					</template>
				</van-field>
				<view style="width: 1rpx;height: 1rpx;overflow: hidden;">
					<input type="text" value="" />
				</view>
				<van-field :value="loginForm.password" :password="!passwordStatus" size="large" :name="loginForm.password" title-width="50rpx" placeholder="请输入密码"
					@change="e => loginForm.password = e.detail.split(/[\t\r\f\n\s]*/g).join('')" @click-icon="passwordStatus = !passwordStatus">
					<template slot="label">
						<view class="icon_pic">
							<image src="/static/login/password.png" mode="aspectFill"></image>
						</view>
					</template>
					<template slot="right-icon">
						<view class="icon_pic">
							<image :src="!passwordStatus ? '/static/login/eye1.png' : '/static/login/eye2.png'" mode="aspectFill">
							</image>
						</view>
					</template>
				</van-field>
				<view class="btn-box">
					<button class="submit-btn" type="info" form-type="submit">
						登录
					</button>
					<view class="bottom">
						<text @click="toPage(1)">忘记密码？</text>
						<text @click="toPage(2)">注册账号</text>
					</view>
				</view>
				<view class="checkbox">
					<van-checkbox :value="loginForm.checked" @change="e => loginForm.checked = e.detail" shape="square" checked-color="#ff2c3b" icon-size="34rpx">
						<view class="txt">
							我已阅读并同意
						</view>
					</van-checkbox>
					<text class="txt">《</text>
					<text class="inner-txt" @click="toArg">
						用户隐私协议
					</text>
					<text class="txt">》</text>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import md5 from "md5";
	import { reqLogin } from "@/apis/user.js";
	import formRules from "@/utils/formRules.js"
	export default {
		name: "Login",
		data() {
			return {
				passwordStatus: false,
				loginForm: {
					username: "",
					password: "",
					checked: false
				},
				rules: {
					username: [
						{ required: true, message: '请填写手机号' },
						{
							pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
							message: '手机号格式错误'
						}
					],
					password: [{ required: true, message: '请填写密码' }]
				}
			}
		},
		methods: {
			onClickLeft() {
				// uni.switchTab({ url: '/pages/index/index' });
				uni.navigateBack();
			},
			toPage(type) {
				uni.navigateTo({ url: type == 1 ? "/packageA/pages/forgetPwd/forgetPwd" : "/packageA/pages/shopRegister/shopRegister" })
			},
			onSubmit(e) {
				let { rules, loginForm } = this;
				formRules(rules, loginForm, async (status) => {
					if (status) {
						if (!loginForm.checked) {
							uni.utils.toast("请阅读并同意用户协议");
							return;
						}
						let { username, password } = loginForm;
						let res = await this.$store.dispatch('user/userLogin', { userName: username, password: md5(password) });
						if (res.code === 200) {
							// uni.switchTab({ url: "/pages/index/index" });
							uni.navigateBack();
						}
					}
				})
			},
			toArg(){
				uni.navigateTo({url:'/packageA/pages/agreement/agreement?type=0'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		position: relative;
		height: 100vh;
	}
	.pic {
		// margin: 136rpx 0 100rpx 48rpx;
		position: relative;
		width: 750rpx;
		height: 376rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.radio-bg {
			position: absolute;
			bottom: -1rpx;
			left: 0;
			background-color: #FFFFFF;
			width: 750rpx;
			height: 36rpx;
			border-radius: 36rpx 36rpx 0 0;
		}
	}

	/deep/ .van-cell {
		padding: 24rpx 32rpx;
	}

	/deep/ .van-cell::after {
		border-bottom: 1px solid #ccc !important;
	}

	.icon_pic {
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.form {
		padding: 0 16rpx;
		width: 750rpx;
		box-sizing: border-box;
	}

	.btn-box {
		padding: 64rpx 32rpx;

		.submit-btn {
			width: 100%;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			letter-spacing: 1px;
			background: linear-gradient(90deg, #FF4F30 0%, #FF1642 100%);
			border-radius: 8rpx;
			margin-bottom: 24rpx;
		}

		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;

			text {
				&:nth-child(1) {
					font-weight: 500;
					font-size: 28rpx;
					color: #999999;
				}

				&:nth-child(2) {
					font-weight: 500;
					font-size: 28rpx;
					color: #FF1642;
				}
			}
		}
	}

	.checkbox {
		position: absolute;
		width: 600rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		bottom: 180rpx;
		.txt {
			font-size: 24rpx !important;
			color: #999999;

			
		}
	}
	.inner-txt {
		font-size: 24rpx !important;
		color: #FF1642;
	}
</style>